import React, { Component } from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'
// import routerList from './routerConfig'

export default class RouterView extends Component {
    render() {
        const { routes } = this.props
        // 筛选出要循环的数据
        let routesList = routes.filter(item => !item.redirect)
        // 筛选出要重定向的数据
        let redirectList = routes.filter(item => item.redirect)
        return (
            <div className="h100">
                <Switch>
                    {
                        routesList.map((item, index) => {
                            return <Route path = { item.path } render = {(prop) => {
                                // 判断页面是否要拦截
                                if (item.auth && !sessionStorage.getItem('token')) {
                                    //  记录拦截的页面（点登录的时候返回该页面） 
                                   return <Redirect to = {{
                                       pathname: "/login",
                                       state: {
                                           back: item.path
                                       }
                                   }}/>
                                } else {
                                    //    prop  路由信息
                                    let Com = item.com
                                    //  如果当前路由下有children才传递
                                    if (item.children) {
                                        return <Com children = { item.children }/>
                                    } else {
                                        return <Com/>
                                    } 
                                }
                            }} key = { index }/>
                        })
                    }

                    {/* 重定向 */}
                    {
                        redirectList.map((item, index) => {
                            return <Redirect from = { item.path } to = { item.redirect } key = { index }/>
                        })
                    }
                </Switch>
            </div>
        )
    }
}
